<template>
  <div id="zhuanlanxiangqing">
       <div class="box">
      <span class="q1" @click="pao">&lt;</span><span class="q2">专栏详情</span>
    </div>
    <div class="box1">
        <p v-html="list.title"></p>  
    </div>
    <div class="box2">
        <img :src="list.pic" alt="">
    </div>
    <div class="box3"  v-html="list.content">
    
    </div>
 </div>
</template>

<script>
import { getzhuanlanxiangqing } from "../utils/api"
export default {
  name: '',
  data() { 
    return {
        list:[]
    }
  },
  created() {
       getzhuanlanxiangqing(this.$route.query.id).then(res=>{
           console.log(res.data.data);
                this.list=res.data.data
       })
  },
  methods:{
      pao(){
          this.$router.go(-1)
      }
  },
 }
</script>

<style scoped lang='scss'>
.box {
  width: 100%;
  height: 50px;
  line-height: 50px;
  border-bottom: 1px solid #cccc;
  .q1 {
    font-size: 20px;
    margin-left: 24px;
  }
  .q2 {
    margin-left: 110px;
    font-size: 18px;
  }
}
.box1{
    width: 100%;
    height: 70px;
    line-height: 70px;
    font-size: 18px;
    text-align: center;

}
.box2{
    width: 100%;
    height: 200px;
    img{
        width: 100%;
        height: 200px;
    }
}
.box3{
    width: 100%;

}
</style>